class GaugeChartComponent extends HTMLElement {
    constructor() {
        super();
        this._shadow = this.attachShadow({ mode: 'closed' });

        // 创建容器
        this._chartDiv = document.createElement('div');
        this._chartDiv.style.width = '100%';
        this._chartDiv.style.height = '100%';
        this._shadow.appendChild(this._chartDiv);

        // 初始化 echarts 实例
        this.chart = echarts.init(this._chartDiv);
    }

    connectedCallback() {
        // 读取属性
        const title = this.getAttribute('title') || '仪表盘';
        const titleColor = this.getAttribute('title-color') || '#000';
        const value = Number(this.getAttribute('value')) || 50;
        const min = Number(this.getAttribute('min')) || 0;
        const max = Number(this.getAttribute('max')) || 100;
        const color = this.getAttribute('color') || '#5470C6';

        const option = {
            title: {
                text: title,
                left: 'center',
                top: '10%',
                textStyle: {
                    color: titleColor,
                    fontSize: 16
                }
            },
            series: [
                {
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    min: min,
                    max: max,
                    radius: '100%',
                    progress: {
                        show: true,
                        width: 18
                    },
                    itemStyle: {
                        color: color
                    },
                    pointer: {
                        show: true,
                        length: '70%',
                        width: 6
                    },
                    axisLine: {
                        lineStyle: {
                            width: 18
                        }
                    },
                    axisTick: {
                        distance: -22,
                        length: 8,
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    splitLine: {
                        distance: -24,
                        length: 16,
                        lineStyle: {
                            color: '#999',
                            width: 2
                        }
                    },
                    axisLabel: {
                        distance: -30,
                        color: '#666',
                        fontSize: 12
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 24,
                        offsetCenter: [0, '40%'],
                        formatter: '{value}%',
                        color: color
                    },
                    data: [
                        {
                            value: value
                        }
                    ]
                }
            ]
        };

        this.chart.setOption(option);
        this.resizeChart();

        // 监听窗口大小变化
        window.addEventListener('resize', this._resizeHandler = this.resizeChart.bind(this));

        // 使用 ResizeObserver 监听容器变化
        if (ResizeObserver) {
            this._observer = new ResizeObserver(() => this.resizeChart());
            this._observer.observe(this.parentElement);
        }
    }

    disconnectedCallback() {
        window.removeEventListener('resize', this._resizeHandler);
        if (this._observer) {
            this._observer.disconnect();
        }
    }

    resizeChart() {
        if (this.chart) {
            this.chart.resize();
        }
    }

    getChartInstance() {
        return this.chart;
    }
}

customElements.define('gauge-chart', GaugeChartComponent);
